<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<meta name="description" content="User login page" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery-validation/1.14.0/jquery.validate.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery-validation/1.14.0/localization/messages_zh.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/bootstrap/3.3.4/js/bootstrap.min.js"  type="text/javascript"></script>
	<link href="${ctxStatic}/awesome/4.4/css/font-awesome.min.css" rel="stylesheet" />
	<!-- jeeplus -->
	<link href="${ctxStatic}/common/jeeplus.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/common/jeeplus.js" type="text/javascript"></script>
	<link rel="shortcut icon" href="images/favicon.png" type="image/png">

	<!-- ace styles -->
	<link rel="stylesheet" href="${ctxStatic }/common/login/ace.css" />
	
	<link rel="stylesheet" href="${ctxStatic }/common/css/login.css" />

	<!-- 引入layer插件 -->
	<script src="${ctxStatic}/layer-v2.0/layer/layer.js"></script>
	<script src="${ctxStatic}/layer-v2.0/layer/laydate/laydate.js"></script>
	<link rel="stylesheet" href="${ctxStatic }/common/login/ace-rtl.css" />
	<title>${fns:getConfig('productName')} 登录</title>
	<script>
		if (window.top !== window.self) {
			window.top.location = window.location;
		}
	</script>
	<script type="text/javascript">
			$(document).ready(function() {
				$("#loginForm").validate({
					rules: {
						validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
					},
					messages: {
						username: {required: "请填写用户名."},password: {required: "请填写密码."},
						validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
					},
					errorLabelContainer: "#messageBox",
					errorPlacement: function(error, element) {
						error.appendTo($("#loginError").parent());
					} 
				});
			});
			// 如果在框架或在对话框中，则弹出提示并跳转到首页
			if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
				alert('未登录或登录超时。请重新登录，谢谢！');
				top.location = "${ctx}";
			}
	</script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#inputForm").validate({
			rules: {
			loginName: {remote: "${ctx}/sys/user/validateLoginName"},
			mobile: {remote: "${ctx}/sys/user/validateMobile"},
			randomCode: {
				  remote:{
					 url:"${ctx}/sys/register/validateMobileCode", 
					 data:{
				     	mobile:function(){
				      			return $("#tel").val();
				     		}
		          		}
					}
				}
			},
			messages: {
				confirmNewPassword: {equalTo: "输入与上面相同的密码"},
				ck1: {required: "必须接受用户协议."},
				loginName: {remote: "此用户名已经被注册!", required: "用户名不能为空."},
				mobile:{remote: "此手机号已经被注册!", required: "手机号不能为空."},
				randomCode:{remote: "验证码不正确!", required: "验证码不能为空."}
			},
			submitHandler: function(form){
				loading('正在提交，请稍等...');
				form.submit();
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});

		$("#resetForm").validate({
			rules: {
			mobile: {remote: "${ctx}/sys/user/validateMobileExist"}
		},
			messages: {
				mobile:{remote: "此手机号未注册!", required: "手机号不能为空."}
			},
			submitHandler: function(form){
				loading('正在提交，请稍等...');
				form.submit();
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});
		// 手机号码验证
		jQuery.validator.addMethod("isMobile", function(value, element) {
		    var length = value.length;
		    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
		    return (length == 11 && mobile.test(value));
		}, "请正确填写您的手机号码");



		$('#sendPassBtn').click(function () { 
			if($("#tel_resetpass").val()=="" || $("#tel_resetpass-error").text()!=""){
				top.layer.alert("请输入有效的注册手机号码！", {icon: 0});//讨厌的白色字体问题
				return;

			}
			$("#sendPassBtn").attr("disabled", true); 
			$.get("${ctx}/sys/user/resetPassword?mobile="+$("#tel_resetpass").val(),function(data){
					if(data.success == false){
						top.layer.alert(data.msg, {icon: 0});//讨厌的白色字体问题
						//alert(data.msg);
						$("#sendPassBtn").html("重新发送").removeAttr("disabled"); 
						clearInterval(countdown); 

					}

				});
			var count = 60; 
			var countdown = setInterval(CountDown, 1000); 
			function CountDown() { 
				$("#sendPassBtn").attr("disabled", true); 
				$("#sendPassBtn").html("等待 " + count + "秒!"); 
				if (count == 0) { 
					$("#sendPassBtn").html("重新发送").removeAttr("disabled"); 
					clearInterval(countdown); 
				} 
				count--; 
			}

			
		}) ;
		

		$('#sendCodeBtn').click(function () { 
			if($("#tel").val()=="" || $("#tel-error").text()!=""){
				top.layer.alert("请输入有效的注册手机号码！", {icon: 0});//讨厌的白色字体问题
				return;

			}
			$("#sendCodeBtn").attr("disabled", true); 
			$.get("${ctx}/sys/register/getRegisterCode?mobile="+$("#tel").val(),function(data){
					if(data.success == false){
						//top.layer.alert(data.msg, {icon: 0});讨厌的白色字体问题
						alert(data.msg);
						$("#sendCodeBtn").html("重新发送").removeAttr("disabled"); 
						clearInterval(countdown); 

					}

				});
			var count = 60; 
			var countdown = setInterval(CountDown, 1000); 
			function CountDown() { 
				$("#sendCodeBtn").attr("disabled", true); 
				$("#sendCodeBtn").html("等待 " + count + "秒!"); 
				if (count == 0) { 
					$("#sendCodeBtn").html("重新发送").removeAttr("disabled"); 
					clearInterval(countdown); 
				} 
				count--; 
			}

			
		}) ;
		
	});

</script>
</head>
<body class="login-layout light-login">
	<canvas></canvas>
	<div class="main-container">
		<div class="main-content">

			<div class="login-container">
				
				<div class="center">
					<sys:message content="${message}"/>
				</div>

				<div class="space-6"></div>

				<div class="position-relative">
					<div id="login-box" class="login-box visible widget-box no-border bound">
						<div class="widget-body bound">
							<div class="widget-main bound">
								<h4 class="header blue lighter bigger">
									${fns:getConfig('productName')}管理后台
								</h4>

								<div class="space-6"></div>

								<form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
									<fieldset>
										<label class="block clearfix">
											<span class="block input-icon input-icon-right">
												<input type="text"  id="username" name="username" class="form-control required"  value="${username}" placeholder="用户名" />
												<i class="ace-icon fa fa-user"></i>
											</span>
										</label>

										<label class="block clearfix">
											<span class="block input-icon input-icon-right">
												<input type="password" id="password" name="password" class="form-control required" placeholder="密码" />
												<i class="ace-icon fa fa-lock"></i>
											</span>
										</label>
										<c:if test="${isValidateCodeLogin}">
											<div class="input-group m-b text-muted validateCode">
											<label class="input-label mid" for="validateCode">验证码:</label>
											<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:5px;"/>
											</div>
										</c:if>
										<div class="space"></div>

										<div class="clearfix">
											<label class="inline">
												<input  type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} class="ace" />
												<span class="lbl"> 记住我</span>
											</label>

											<button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
												<i class="ace-icon fa fa-key"></i>
												<span class="bigger-110">登录</span>
											</button>
										</div>


									</fieldset>
								</form>

							</div><!-- /.widget-main -->
						</div><!-- /.widget-body -->
					</div><!-- /.login-box -->
				</div><!-- /.position-relative -->
			</div>
		</div><!-- /.main-content -->
	</div><!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery || document.write("<script src='../assets/js/jquery.js'>"+"<"+"/script>");
	</script>

	<!-- <![endif]-->

	<!--[if IE]>
	<script type="text/javascript">
	 window.jQuery || document.write("<script src='../assets/js/jquery1x.js'>"+"<"+"/script>");
	</script>
	<![endif]-->

	<script type="text/javascript">
		if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
	</script>
	<!-- inline scripts related to this page -->
	<script type="text/javascript">
	$(document).ready(function() {
		 $(document).on('click', '.form-options a[data-target]', function(e) {
			e.preventDefault();
			var target = $(this).data('target');
			$('.widget-box.visible').removeClass('visible');//hide others
			$(target).addClass('visible');//show target
		 });
	});
	</script>
	
	<script type="text/javascript">
		$(function(){
			  var canvas = document.querySelector('canvas'),
			      ctx = canvas.getContext('2d')
			  canvas.width = window.innerWidth;
			  canvas.height = window.innerHeight;
			  ctx.lineWidth = 1;
			  ctx.strokeStyle = (new Color(150)).style;
			
			  var mousePosition = {
			    x: 30 * canvas.width / 100,
			    y: 30 * canvas.height / 100
			  };
			  
			  console.log(canvas.width / 1.5);
			  var dots = {
			    nb: 750,
			    distance: 50,
			    d_radius: 100,
			    array: []
			  };
			
			  function colorValue(min) {
			    return Math.floor(Math.random() * 255 + min);
			  }
			  
			  function createColorStyle(r,g,b) {
			    return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
			  }
			  
			  function mixComponents(comp1, weight1, comp2, weight2) {
			    return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
			  }
			  
			  function averageColorStyles(dot1, dot2) {
			    var color1 = dot1.color,
			        color2 = dot2.color;
			    
			    var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
			        g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
			        b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
			    return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
			  }
			  
			  function Color(min) {
			    min = min || 0;
			    this.r = colorValue(min);
			    this.g = colorValue(min);
			    this.b = colorValue(min);
			    this.style = createColorStyle(this.r, this.g, this.b);
			  }
			
			  function Dot(){
			    this.x = Math.random() * canvas.width;
			    this.y = Math.random() * canvas.height;
			
			    this.vx = -.5 + Math.random();
			    this.vy = -.5 + Math.random();
			
			    this.radius = Math.random() * 2;
			    this.color = new Color();
			  }
			
			  Dot.prototype = {
			    draw: function(){
			      ctx.beginPath();
			      ctx.fillStyle = this.color.style;
			      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
			      ctx.fill();
			    }
			  };
			
			  function createDots(){
			    for(i = 0; i < dots.nb; i++){
			      dots.array.push(new Dot());
			    }
			  }
			
			  function moveDots() {
			    for(i = 0; i < dots.nb; i++){
			
			      var dot = dots.array[i];
			
			      if(dot.y < 0 || dot.y > canvas.height){
			        dot.vx = dot.vx;
			        dot.vy = - dot.vy;
			      }
			      else if(dot.x < 0 || dot.x > canvas.width){
			        dot.vx = - dot.vx;
			        dot.vy = dot.vy;
			      }
			      dot.x += dot.vx;
			      dot.y += dot.vy;
			    }
			  }
			
			  function connectDots() {
			    for(i = 0; i < dots.nb; i++){
			      for(j = 0; j < dots.nb; j++){
			        i_dot = dots.array[i];
			        j_dot = dots.array[j];
			
			        if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
			          if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
			            ctx.beginPath();
			            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
			            ctx.moveTo(i_dot.x, i_dot.y);
			            ctx.lineTo(j_dot.x, j_dot.y);
			            ctx.stroke();
			            ctx.closePath();
			          }
			        }
			      }
			    }
			  }
			
			  function drawDots() {
			    for(i = 0; i < dots.nb; i++){
			      var dot = dots.array[i];
			      dot.draw();
			    }
			  }
			
			  function animateDots() {
			    ctx.clearRect(0, 0, canvas.width, canvas.height);
			    moveDots();
			    connectDots();
			    drawDots();
			
			    requestAnimationFrame(animateDots);	
			  }
			
			  $('canvas').on('mousemove', function(e){
			    mousePosition.x = e.pageX;
			    mousePosition.y = e.pageY;
			  });
			
			  $('canvas').on('mouseleave', function(e){
			    mousePosition.x = canvas.width / 2;
			    mousePosition.y = canvas.height / 2;
			  });
			
			  createDots();
			  requestAnimationFrame(animateDots);
			  
			  window.onresize = function(){
				  canvas.width = window.innerWidth;
				  canvas.height = window.innerHeight;

			  }
		});
		</script>
	
</body>
</html>
